<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
    <h1>文件上传</h1>
<!--     enctype="multipart/form-data" 文件上传必须使用的属性-->
    <form id="uploadForm" enctype="multipart/form-data">
        <input type="file" name="file"> <br>
        <button type="submit">上传</button>
    </form>
    <h2>文件上传</h2>
    <img src="" id="uploadImage" style="max-width:300px">
</body>
<script>
    $("#uploadForm").on("submit", function (e) {
        e.preventDefault();//组织表单的默认的提交方式
        var formData = new FormData(this);//获取到表单数据
        console.log(formData)
        //错误可能与如何配置 AJAX 请求的 contentType 和 processData 选项有关。上传文件时使用 FormData，必须正确设置这些选项。

        //contentType: false：防止 jQuery 自动设置 Content-Type 头部，这会干扰 FormData。
        //processData: false：告诉 jQuery 不处理数据，因为它是一个 FormData 对象，而不是标准的查询字符串。
        $.ajax({
            //url:"/upload",
            url:"/upload1",
            method:"post",
            data:formData,
            contentType: false,  // 不为 FormData 设置 contentType
            processData: false,  // 不处理数据
            dataType:"json",
            success : function (ret) {
                console.log(ret)
                //upload
                //$("#uploadImage").attr("src", ret.data)
                $("#uploadImage").attr("src", ret.imageUrl)
            }

        })

    })
</script>
</html>